<!DOCTYPE html>
<html>
<head lang="en">
    <%include ../base/include.ejs%>
    <script type="text/javascript" src="/javascript/project.js"></script>
    <link rel="stylesheet" href="/plugin/jacaranda/jacaranda.css">
    <script type="text/javascript" src="/plugin/jacaranda/jacaranda.js"></script>
</head>
<body>
<style>
    .list-fix{
        margin-left: -20px!important;
        padding-left: 20px!important;
    }
</style>
<%include ../base/menu.ejs%>
<div class="container ya-content">
    <div class="row">
        <div class="col-md-3">
            <%include ./projectMenu.ejs%>
        </div>
        <div class="col-md-9">
            <div id="jacaranda">

                <div class="col-md-12">
                    <div class="ya-head">
                        <div class="ya-label ya-active" data-val="jcrd-sync">同步树</div>
                        <div class="ya-label" data-val="jcrd-desy">异步树</div>
                        <div class="ya-label" data-val="jcrd-choose">复选树</div>
                        <div class="ya-label" data-val="jcrd-radio">单选树</div>
                    </div>
                    <div id="jcrd-sync">
                        <div class="col-md-3">
                            <div id="test"></div>
                        </div>
                        <div class="col-md-9">
                            <pre class="brush: js">
var data =[
            {"_children":
                    [{"_children":[
                        {"_value":"蓝楹","id":"5"},
                        {"_value":"火烧花","id":"6"},
                        {"_value":"木蝴蝶",
                                "id":"7",
                                "disabled":"true"}],
                        "_value":"紫葳科","id":"3"},
                        {"_children":[
                            {"_value":"紫草","id":"8"},
                            {"_value":"勿忘我","id":"9"}],
                            "_value":"紫草科","id":"4"}],
                "_value":"管花目","id":"1"},
            {"_children":
                    [{"_value":"石蒜科","id":"10"}],
                "_value":"天门冬目","id":"2"}
        ];
var opts = {
    data: data,
    children: "_children",
    text: "_value"
}
var jcrdTree = $("#test").jacaranda(opts);
                            </pre>
                        </div>
                    </div>
                    <div id="jcrd-desy" class="ya-hide">
                        <div class="col-md-3">
                            <div id="test2"></div>
                        </div>
                        <div class="col-md-9">
                            <pre class="brush: js">
var opts2 = {
    data: [{"name":"东部王国", id:"1", leaf:"false"},
        {"name":"卡里姆多", id:"2", leaf:"false"},
        {"name":"诺森德", id:"3", leaf:"false"},
        {"name":"潘达利亚", id:"4"}],
    synac: "/project/loadTree"
}
$("#test2").jacaranda(opts2);
                            </pre>
                        </div>
                    </div>
                    <div id="jcrd-choose" class="ya-hide">
                        <div class="col-md-3">
                            <div id="test3"></div>
                        </div>
                        <div class="col-md-9">
                            <pre class="brush: js">
var opts3 = {
    data: [{"name":"东部王国", id:"1", leaf:"false"},
        {"name":"卡里姆多", id:"2", leaf:"false"},
        {"name":"诺森德", id:"3", leaf:"false"},
        {"name":"潘达利亚", id:"4"}],
    synac: "/project/loadTree",
    modal: "checkbox"
}
$("#test3").jacaranda(opts3)
    .on("jcrd.choose.after",
        function(event, id, isSelected, $dom){
            if(isSelected)alert("选中了"+$dom.text());
        });
                            </pre>
                        </div>
                    </div>
                    <div id="jcrd-radio" class="ya-hide">
                        <div class="col-md-3">
                            <div id="test4"></div>
                        </div>
                        <div class="col-md-9">
                            <pre class="brush: js">
var opts4 = {
    data: [{"name":"东部王国", id:"1", leaf:"false"},
        {"name":"卡里姆多", id:"2", leaf:"false"},
        {"name":"诺森德", id:"3", leaf:"false"},
        {"name":"潘达利亚", id:"4"}],
    synac: "/project/loadTree",
    modal: "radio"
}
$("#test4").jacaranda(opts4)
    .on("jcrd.choose.after",
        function(event, id, isSelected, $dom){
            if(isSelected)alert($dom.text()+"失去了选中状态");
        });
                            </pre>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <hr>
                    </div>
                    <div class="col-md-12" style="word-break: break-all">
                        <h1>属性</h1>
                        <span class="line"></span>
                        <div class="ya-list">
                            <div>
                                <label>data</label>
                                <div>数据源 : js对象，每一个节点对象包含一组当前节点的属性和叶子的数组</div>
                                <pre class="brush: js">
[
	{"_children":
		[{"_children":[
			{"_value":"蓝楹","id":"5"},
		 	{"_value":"火烧花","id":"6"},
		 	{"_value":"木蝴蝶","id":"7"}],
		 "_value":"紫葳科","id":"3"},
		 {"_children":[
		 	{"_value":"紫草","id":"8"},
		 	{"_value":"勿忘我","id":"9"}],
		 "_value":"紫草科","id":"4"}],
		 "_value":"管花目","id":"1"},
	{"_children":
		[{"_value":"石蒜科","id":"10"}],
		"_value":"天门冬目","id":"2"}
]
                                </pre>
                            </div>
                            <div>
                                <label>leaf</label><span class="text-muted col-md-offset-1">[deafult: "leaf"]</span>
                                <div>是否为叶子节点，当节点的该属性存在值切为"true"时，认为该节点是叶子节点，覆盖children的判断逻辑</div>
                            </div>
                            <div>
                                <label>children</label><span class="text-muted col-md-offset-1">[deafult: "children"]</span>
                                <div>下级节点属性名，当leaf不为"true"时，如果一个节点的children不存在则不会生成展开按钮</div>
                            </div>
                            <div>
                                <label>text</label><span class="text-muted col-md-offset-1">[deafult: "name"]</span>
                                <div>节点展示内容属性名</div>
                            </div>
                            <div>
                                <label>synac</label><span class="text-muted col-md-offset-1">[deafult: false]</span>
                                <div>标识同步/异步树，当要生成一颗异步树时，synac的值为请求子节点的url，
                                    该请求会post当前节点的data-id作为参数，如data: {parentId: $this.attr("data-id")}，
                                    根据返回的内容构造下级节点。
                                </div>
                            </div>
                            <div>
                                <label>modal</label><span class="text-muted col-md-offset-1">["show"|"checkbox"|"radio"]</span>
                                <div>默认为show，设置为checkbox时为复选模式，设置为radio时为单选模式</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12" style="word-break: break-all">
                        <h1>事件</h1>
                        <div class="ya-list">
                            <div>
                                <label>jcrd.choose.after</label><span class="text-muted col-md-offset-1">function[event, id, isSelected, $dom]</span>
                                <div>选择节点后触发，回调参数为选中节点data-id，是否选中，选中dom</div>
                            </div>
                            <div>
                                <label>jcrd.unChecked.after</label><span class="text-muted col-md-offset-1">function[event, id, $dom]</span>
                                <div>节点失去选中状态后触发，回调参数为选中节点data-id，选中dom</div>
                            </div>
                            <div>
                                <label>jcrd.open.after</label><span class="text-muted col-md-offset-1">function[event, $dom]</span>
                                <div>展开节点后触发，回调参数为展开的dom</div>
                            </div>
                            <div>
                                <label>jcrd.close.after</label><span class="text-muted col-md-offset-1">function[event, $dom]</span>
                                <div>收起节点后触发，回调参数为收起的dom</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12" style="word-break: break-all">
                        <h1>github</h1>
                        <span class="line"></span>
                        <p><a href="https://github.com/sunextra/jacaranda">https://github.com/sunextra/jacaranda</a></p>
                        <p><a href="http://git.oschina.net/voidsun/garden/tree/master/jacaranda">http://git.oschina.net/voidsun/garden/tree/master/jacaranda</a></p>
                    </div>
                    <div class="col-md-12" style="word-break: break-all">
                        <h1>更新日志</h1>
                        <div class="ya-list">
                            <div>
                                <div><label>2015-8-10    ver1.2.1</label></div>
                                <div>
                                    <li>增加了节点展开和收起事件</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2015-8-10    ver1.2</label></div>
                                <div>
                                    <li>增加了单选模式</li>
                                    <li>增加了节点失去选中状态事件</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2015-8-3    ver1.1.1</label></div>
                                <div>
                                    <li>增加了disable属性</li>
                                    <li>代码重构，提高了重用性和拼接字符串的效率</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2015.04.05	ver1.1</label></div>
                                <div>
                                    <li>源码迁移到oschina</li>
                                    <li>多处样式优化，现在点击一个节点触发的是展开/收起事件，而不是选中/取消事件</li>
                                    <li>异步模式下每个节点只会加载一次了</li>
                                    <li>现在可以通过注册事件来处理选择节点的回调，而不是初始化时传入回调方法了</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2015.01.11	ver1.0</label></div>
                                <div>
                                    <li>修改了参数结构</li>
                                    <li>增加同步/异步标记sync，现在jacaranda也可以是一个异步树了</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2014.10.23	ver0.9.1</label></div>
                                <div>
                                    <li>增加属性选择事件回调函数:options.clickCb = function.</li>
                                    <li>增加属性options.params,配置子节点、节点显示文本值来源,标记叶子节点</li>
                                </div>
                            </div>
                            <div>
                                <div><label>2014.10.16	ver0.9</label></div>
                                <div>
                                    <li>移除弹出层部分功能</li>
                                    <li>增加select,expandAll,closeAll方法</li>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <hr>
                    </div>
                    <div class="col-md-12">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>